<template>
  <div class="charts" id="bl-echarts" style="height:100%">

  </div>
</template>

<!--招标次数-->
<script setup>
import {
  onMounted,
  ref, watch, onUnmounted, nextTick
} from "vue";

import * as echarts from 'echarts';

const props = defineProps({
  brokenLineData: {
    type: Object,
    required: true
  }
});

let myChart = null;

// 窗口大小变化处理函数
const handleResize = () => {
  if (myChart) {
    myChart.resize();
  }
};

const renderChart = () => {
  nextTick(() => {
    if (!props.brokenLineData || !props.brokenLineData.length) return;

    const chartDom = document.getElementById('bl-echarts');
    if (!chartDom) return;
    
    if (!myChart) {
      myChart = echarts.init(chartDom);
    }

  const option = {

    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['投标次数', '中标次数'],
      top:"5%",
      textStyle: {          
      fontSize: 16
    }
    },
    grid: {
      top: "20%",
      left: '3%',
      right: '4%',
      bottom: '5%',
      containLabel: true
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.brokenLineData.map((item) => item.mouth)
    },
    yAxis: {
      type: 'value'
    },
    color: ['rgba(0, 128, 255, 1)', 'rgba(243, 115, 22, 1)'],
    series: [
      {
        name: '投标次数',
        type: 'line',
        // stack: 'Total',
        data: props.brokenLineData.map(item => item.bidCount)
      },
      {
        name: '中标次数',
        type: 'line',
        // stack: 'Total',
        data: props.brokenLineData.map((item) => item.isWinCount),
        
      }
    ]
  };

  myChart.setOption(option);
  });
};


// 如果 data 是异步的，监听变化
watch(() => props.brokenLineData, () => {
  console.log('brokenLineData-----------------', props.brokenLineData);
  renderChart();
},{ deep: true });

onMounted(() => {
  renderChart();
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // 组件卸载时移除事件监听和销毁图表实例
  window.removeEventListener('resize', handleResize);
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});
</script>
